<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eeeeee;
        }

        .navbar-text a {
            color: #ffffff;
            padding-right: 10px;
        }

        .login-text {
            margin-right: 50px;
        }

        .logo {
            color: #E94F4C;
            font-size: 35px;
            display: inline-block;
        }

        .search-box {
            height: 48px;
        }

        #ssl {
            height: 48px;
        }

        .input-group-addon {
            background-color: #E94F4C;
            border: none;
            color: #ffffff;
        }

        .control-icon {
            position: absolute;
            top: 50%;
        }

        .mgt38 {
            margin-top: 30px;
        }

        .thumbnail a img {
            height: 200px;
            width: 200px;
        }

        .thumbnail .description {
            height: 40px;
            overflow: hidden;
        }

        a:hover {
            text-decoration: none;
        }

        h3,
        p {
            text-align: left;
        }

        .dropdown {
            margin: 8px;
            float: right;
            display: none;
        }

        #dropdownMenu1 {
            border: none;
            background-color: #222;
            color: #FFFFFF;
        }

        .dropdown-menu {
            text-align: center;
        }

        .dropdown-menu > li > a > i {
            float: left;
            margin-left: 10px;
        }

        .login {
            display: block;
        }
        /*客服*/
        .modal-header {
            text-align: center;
        }

        .modal-header>button {
            float: left;
        }

        .modal-header i {
            margin-right: 10px;
            color: crimson;
        }

        #chat_room {
            height: 400px;
            margin-top: 10px;
            overflow: auto;
        }

        #chatText {
            border: 0;
            border-radius: 5px;
            background-color: rgba(241, 241, 241, .98);
            height: 100px;
            padding: 10px;
            margin-bottom: 10px;
            resize: none;
        }
        #message {
            padding-inline-start: 0;
        }
        #message>li {
            list-style-type: none;
            margin: 4px 0;
        }
        .she {
            text-align: left;
        }
        .me {
            text-align: right;
        }
        .she span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 4px;
            background-color: pink;
            border-radius: 50%;
            color: #FFFFFF;
        }
        .she p {
            padding: 5px;
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 10px 0;
            color: #FFFFFF;
        }
        .me span {
            text-align: center;
            margin: 2px 4px;
            padding: 10px 11px;
            background-color: skyblue;
            border-radius: 50%;
            color: #FFFFFF;
        }
        .me p {
            padding: 5px;
            display: inline-block;
            background-color: #07C160;
            border-radius: 10px 10px 0 10px;
            color: #FFFFFF;
        }
        #csBtn {
            position: fixed;
            bottom: 500px;
        }
        #close{
            text-align: left;
        }
        .h3{
            text-align: left;
        }

    </style>
</head>
<body>

<nav class="navbar navbar-default navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="shop_show.html" class="navbar-brand" style="color: #ffffff;"><i class="fa fa-space-shuttle"></i>火箭速购</a>
        </div>
        <div class="navbar-right" id="login">
            <p class="navbar-text">
                <a href="login.jsp">登录</a>
            </p>
            <p class="navbar-text">
                <a href="register.html">注册</a>
            </p>
        </div>
        <div class="dropdown" id="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                欢迎你，<span>{{username}}</span>
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li><a href="shop-cart.html"><i class="fa fa-shopping-cart"></i>我的购物车</a></li>
                <li><a href="order.html"><i class="fa fa-shopping-basket"></i>我的订单</a></li>
                <li><a href="login.jsp" onclick="quit()"><i class="fa fa-exchange"></i>切换账号</a></li>
                <li><a href="javascript:void(0)" onclick="quit()"><i class="fa fa-sign-out"></i>退出登录</a></li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="row">
        <div class="col-xs-10 col-xs-push-1">

            <div>
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">默认地址</a></li>
                    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">添加地址</a></li>
                </ul>

                <!-- 默认配送地址 -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="home">
                        <ul class="list-group" id="app">
                            <input id="defuteAddres" type="text" hidden  value=""></input>
                            <li v-for="m in movies" class="list-group-item">
                                <div class="media">
                                    <div class="media-body">
                                        <h3 class="media-heading"></h3>
                                        <h4>配送地址</h4>
                                        <p>名字: {{m.aname}}</p>
                                        <p>电话: {{m.aphone}}</p>
                                        <p>地址: {{m.adetail}}</p>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="messages">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">姓名</label>
                                <div class="col-sm-10">
                                    <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">电话</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">地址</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox"> Remember me
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-offset-2 col-sm-10">
                                    <button type="submit" class="btn btn-default">Sign in</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="settings">
                        <table class="table table-hover table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>电话</th>
                                <th>操作</th>
                            </tr>
                            <tr>
                                <th>keikai</th>
                                <th>22</th>
                                <th>13660123456</th>
                                <th><button class="btn btn-default" data-toggle="modal" data-target="#addUser">查询</button></th>
                            </tr>
                            <tr>
                                <th>keikai</th>
                                <th>22</th>
                                <th>13660123456</th>
                                <th><button class="btn btn-default" data-toggle="modal" data-target="#addUser">查询</button></th>
                            </tr>
                            <tr>
                                <th>keikai</th>
                                <th>22</th>
                                <th>13660123456</th>
                                <th><button class="btn btn-default" data-toggle="modal" data-target="#addUser">查询</button></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>

                <!-- 更改配送地址 -->
                <div class="btn-group">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        更多地址 <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" id="more"  style="width: 700px;height: 20px">
                        <li v-for="o in orders" class="list-group-item">
                            <div class="media">
                                <div class="media-body">
                                    <h3 class="media-heading"></h3>
                                    <h4>配送地址</h4>
                                    <p>名字: {{o.name}}</p>
                                    <p>电话: {{o.phone}}</p>
                                    <p>地址: {{o.detail}}</p>
                                </div>
                                <!--                    <input id="aid" hidden type="text" :value=/>-->
                                <button  class="btn btn-sm" :uid=o.uid :aid="o.aid" onclick="setAddress(this)">设置为配送地址</button>
                            </div>
                        </li>
                    </ul>
                </div>

                <!--结算-->
                <div id="close">
                    <table class="table">
                        <tbody>
                        <tr>
                            <td>商品</td>
                            <td>商品名字</td>
                            <td>价格</td>
                            <td>数量</td>
                        </tr>
                        <tr v-for="g in goods">
                            <td><img width="70" :src="g.smallPic"></td>
                            <td class="money">{{g.title}}</td>
                            <td>{{g.price}}</td>
                            <td id="num">{{g.num}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div>
                        <h4 style="font-weight: 800; margin-left: 83%"><span>应付金额: {{totalPrice}}</span><span style="color: red;" id="totalPrice"></span></h4>
                    </div>

                    <button type="button" onclick="upOrders()" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"

                            style="margin-left: 87%" >
                        确认付款
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel" onclick="addOrders()">确认付款</h4>
                                </div>
                                <div class="modal-body">
                                    <h4 style="font-weight: 800; ">应付金额：</h4>
                                    <h4 id="money" style="font-weight: 800;">{{totalPrice}}</h4>
                                    <table>
                                        <tr v-for="o in orders">
                                            <td><img width="70" :src="o.img"></td>
                                            <td>{{o.title}}</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="modal-footer">
                                    <button id="ali" type="button" class="btn btn-primary btn-lg" onclick="aliPay()" >支付宝支付</button>
                                    <button id="wechat" type="button" class="btn btn-success btn-lg" onclick="wechatPay()">微信支付</button>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>

        </div>
    </div>
</div>

</body>
</html>



<!-- 默认地址 -->
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            movies: []
        }
    });

    $.ajax({
        url: "http://localhost:8080/selectByUid/28",
        type: "get",
        dataType: "json",
        success: function (data) {
            vm.movies.push(data);
        }
    });

</script>

<!-- 多选地址 -->
<script>
    var vu=new Vue({
        el:"#more",
        data:{
            orders:[],
        },
    });

    function address() {
        $.ajax({
            url: "http://localhost:8080/selectAddress/28",
            type: "get",
            dataType: "json",
            async: true,
            success: function (_data) {
                for (var i = 0; i < _data.length; i++) {
                    var da = _data[i];
                    var phone = da.aphone;
                    var detail = da.adetail;
                    var name = da.aname;
                    var uid = da.uid;
                    var aid = da.aid;
                    vu.orders.push({
                        phone: phone,
                        detail: detail,
                        name: name,
                        aid: aid,
                        uid: uid
                    })
                }
            }
        })
    }
</script>

<!-- 渲染商品 -->
<script>
    var vn=new Vue({
        el:"#close",
        data:{
            goods:[],
            totalPrice: 0
        },
    });

    var vm2 = new Vue({
        el: '#dropdown',
        data: {
            username: null
        },
    });

    //登录验证
    // $(function () {
    //     $.ajax({
    //         url: 'http://localhost:8080/loginJudge',
    //         type: 'get',
    //         dataType: 'json',
    //         data: {
    //             method: "login"
    //         },
    //         success: function (_data) {
    //             console.log(_data);
    //             // 如果用户登录
    //             code = _data.code;
    //             vm2.username = _data.username;
    //             if (code == 2) {
    //                 $('#login').css('display', 'none');
    //                 $('#dropdown').css('display', 'block')
    //             }
    //         }
    //     })
    // });

    var localShoppingCart = localStorage.getItem('local_shopping_cart');

    //判断本地购物车是否有数据
    if (localShoppingCart) {
        //本地数据转换为json数据
        localShoppingCart = JSON.parse(localShoppingCart);
        //取得商品id的数组
        var goodIds = Object.keys(localShoppingCart);
        // join(‘,’) 只用指定的字符将数组拼接成字符串
        var goodIdsStr = goodIds.join(','); // ['1001', '1002', '1003'] -> 1001,1002,1003
        //获取商品数量
        var goodNum = Object.values(localShoppingCart);
        // join(‘,’) 只用指定的字符将数组拼接成字符串
        var goodNumStr = goodNum.join(',')
        //用商品id获取商品信息
        $.ajax({
            url: 'http://localhost:8080/selectById/'+goodIdsStr,
            type: 'post',
            dataType: 'json',
            data: {ids: goodIdsStr},
            success: function (_data) {  // [{}, {}, {}]
                var totalNum = 0;  //总数量
                var totalPrice = 0;//总价格
                for (var i = 0; i < _data.length; i++) {
                    var good = _data[i];  //获取到每件商品
                    var goodId = good.goodsId; //获取商品的id, 目的是获取商品的数量
                    // 动态的添加的属性, 购买的商品数量
                    good.num = localShoppingCart['' + goodId];

                    totalNum += good.num;   //计算总数量
                    totalPrice += (good.num * good.price); //计算总的价格
                    vn.goods.push(good);
                }
                vn.totalNum = totalNum;
                vn.totalPrice = totalPrice;
            }
        });

        $.ajax({
            url: 'http://localhost:8080/selectById/'+goodIdsStr,
            type: 'post',
            dataType: 'json',
            data: {ids: goodIdsStr},
            success: function (_data) {  // [{}, {}, {}]
            }
        });
    }
</script>

<!-- 点击设置为配送地址 -->
<script>
    function setAddress(btnTag) {
        // var aid=$("#aid").val();
        // var phone=$(".phone").val();
        var aid = $(btnTag).attr('aid')
        $("#defuteAddres").val(aid);
        var uid = $(btnTag).attr('uid')
        console.log("aid :"+aid);
        console.log("uid :"+uid);
        $.ajax({
            url: "http://localhost:8080/updateAddress/"+aid+'/'+uid,
            type: "get",
            dataType: "json",
            async: true,
            data:{
                aid:aid,
                uid:uid
            },
            success:function () {
                location.reload();
            }
        })
    }
    address();
</script>

<!-- 微信支付 -->
<script>
    function wechatPay() {
        var money=$("#money").html();
        // $.ajax({
        //     url:"http://localhost:8080/wechatpay/test",
        //     type:"GET",
        //     async:true,
        //     dataType:"json",
        //     contentType:"application/x-www-form-urlencoded",
        //     // headers:{
        //     //     "Content-Type":"application/json;charset=utf-8"
        //     // },
        //     data:{num:money},
        //     success:function (_data) {
        //
        //     }
        // })
        // window.open("payment.jsp", '手机百度', 'height=500, width=500, top=20, left=500, toolbar=no, menubar=no, scrollbars=no, resizable=false, location=no, status=no');
        location.href="http://localhost:8080/front_system_war_exploded/wechatpay/test?num="+money;
    }
</script>

<!-- 支付宝支付 -->
<script>
    function aliPay() {
        var money=$("#money").html();
        location.href="http://localhost:8080/alipay/paypage.html?num="+money;
    }


</script>

<!-- 添加订单 -->
<script>

    function addOrders() {
        var localShoppingCart = localStorage.getItem('local_shopping_cart');

        //判断本地购物车是否有数据
        if (localShoppingCart) {
            //本地数据转换为json数据
            localShoppingCart = JSON.parse(localShoppingCart);
            //取得商品id的数组
            var goodIds = Object.keys(localShoppingCart);
            // join(‘,’) 只用指定的字符将数组拼接成字符串
            var goodIdsStr = goodIds.join(',');

            var goodsNum = Object.values(localShoppingCart);
            var goodNumStr = goodsNum.join(',');

            console.log(goodIdsStr);
            console.log(goodNumStr);
            alert(goodIdsStr)
            alert(goodNumStr)
        }

        // $.ajax({
        //     url:"http://localhost:8080/selectNum/"+goodIdsStr+'/'+goodNumStr,
        //     type:"GET",
        //     async:false,
        //     dataType:"json",
        //     success:function (_data) {
        //         if (_data!=null){
        //
        //         }else {
        //             alert("库存不足！");
        //         }
        //     }
        // });


    }
</script>

<!--订单商品渲染-->
<script>
    // function upOrders() {
    //     var localShoppingCart = localStorage.getItem("local_shopping_cart");
    //     var aid =2
    //     $.ajax({
    //         url:'http://localhost:8080/selectById/'+localShoppingCart,
    //         type:"Post",
    //         dataType:"json",
    //         data:{ordersS:localShoppingCart,addres:aid},
    //
    //         success:function (_data) {
    //             if (_data.code>0){
    //
    //             }
    //         }
    //     })
    // }
    function upOrders() {
        var localShoppingCart = localStorage.getItem('local_shopping_cart');

        //判断本地购物车是否有数据
        if (localShoppingCart) {
            //本地数据转换为json数据
            localShoppingCart = JSON.parse(localShoppingCart);
            //取得商品id的数组
            var goodIds = Object.keys(localShoppingCart);
            // join(‘,’) 只用指定的字符将数组拼接成字符串
            var goodIdsStr = goodIds.join(',');

            var goodsNum = Object.values(localShoppingCart);
            var goodNumStr = goodsNum.join(',');

            console.log(goodIdsStr);
            console.log(goodNumStr);
            alert(goodIdsStr)
            alert(goodNumStr)
        }
    }
</script>


